﻿<!DOCTYPE HTML> 
<html>
    <head>
    </head>
    <body>
		<div id="area">
			<fieldset style="border:0;padding:3px;">
				<legend style="color: #666699;font-family: verdana,tahoma,arial;font-size: 15px;font-weight: bold;">获取鼠标位置</legend>
				<label for="MouseXPosition">Mouse X Position:</label> <input id="MouseXPosition" type="input"/>
				<label for="MouseYPosition">Mouse Y Position:</label> <input id="MouseYPosition" type="input"/>
			</fieldset>
		</div>
        <script type='text/javascript'>
			var mouseXPosition = null,
				mouseYPosition = null;
			window.onload = function() {
				mouseXPosition = document.getElementById("MouseXPosition"),
				mouseYPosition = document.getElementById("MouseYPosition");
				document.onmousemove = mouseMove;
			}
			function mouseMove(e) {
				var ev = window.event || e,
					mousePos = mouseCoords(ev);
				changeMousePos(mousePos);			
			}
			function changeMousePos(mousePos) {
				mouseXPosition.value = mousePos.x;
				mouseYPosition.value = mousePos.y;
			}
			function mouseCoords(e) {
				if (e.pageX) {
					return {
						x: e.pageX,
						y: e.pageY
					}
				}
				return {
					x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
					y: e.clientY + document.body.scrollTop -  document.body.clientTop
				}
			}
        </script>
    </body>
</html>